<template>
  <div class="production-page">
    <!-- 顶部指标条 -->
    <div class="top-metrics">
      <div class="metric-card" v-for="(m, i) in topMetrics" :key="m.label">
        <div class="metric-label">{{ m.label }}</div>
        <div class="metric-value">{{ animatedMetricValues[i] ?? m.value }}</div>
        <div class="metric-sub" v-if="m.sub">{{ m.sub }}</div>
      </div>
    </div>

    <!-- 主体滚动容器（避免内容覆盖，支持滚动） -->
    <div class="main-scroll">
      <!-- 主体三列 -->
      <div class="content-rows">
        <!-- 左侧：对比与排名 -->
        <div class="left-col">
          <div class="panel">
            <div class="panel-title">全局生产概览与对比</div>
            <div ref="globalCompareRef" class="chart-box"></div>
          </div>
          <div class="panel">
            <div class="panel-title">生产效率排名（动态）</div>
            <ul class="rank-list" ref="rankListRef">
              <li v-for="(r, idx) in rankData" :key="r.name" :class="{ highlight: idx===highlightIndex }">
                <span class="rank-name">{{ r.name }}</span>
                <span class="rank-value">{{ r.efficiency }} 吨/小时</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 中间：炉状态 + 流程图 -->
        <div class="center-col">
          <div class="panel">
            <div class="panel-title">冶炼炉实时状态</div>
            <div class="furnace-grid">
              <div class="furnace-card" v-for="f in furnaces" :key="f.id">
                <div class="furnace-head">
                  <span class="furnace-name">{{ f.name }}</span>
                  <span class="furnace-status" :class="f.status">{{ f.status === 'online' ? '在线' : '停机' }}</span>
                </div>
                <div class="furnace-stats">
                  <div class="stat">温度：<b>{{ f.temp }} ℃</b></div>
                  <div class="stat">负载：<b>{{ f.load }} %</b></div>
                  <div class="stat">投料：<b>{{ f.feed }} 吨</b></div>
                </div>
              </div>
            </div>
          </div>

          <div class="panel flow-panel">
            <div class="panel-title">生产流程概览</div>
            <ProductionFlow2D class="flow-2d"></ProductionFlow2D>
          </div>
        </div>

        <!-- 右侧：详情曲线 -->
        <div class="right-col">
          <div class="panel">
            <div class="panel-title">炉体生产曲线（四炉）</div>
            <div ref="productionCurveRef" class="chart-box"></div>
          </div>
          <div class="panel">
            <div class="panel-title">投料温度趋势（{{ feedViewLabel }}）</div>
            <div ref="feedTempRef" class="chart-box small"></div>
          </div>
        </div>
      </div>

      <!-- 底部：电费成本与节能分析 - 铺满整个底部 -->
      <div class="bottom-section">
        <div class="panel cost-panel-full">
          <div class="panel-title">电费成本与节能分析（{{ costViewLabel }}）</div>
          <div ref="costSavingRef" class="chart-box cost-chart-full"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import ProductionFlow2D from './ProductionFlow2D.vue'

export default {
  name: 'ProductionPage',
  components: { ProductionFlow2D },
  setup() {
    // 顶部指标
    const topMetrics = ref([
      { label: '全厂总产量（吨）', value: '8,820', sub: '周期：近30天' },
      { label: '全厂总电耗（kWh）', value: '22,680,000', sub: '单位产品综合电耗 2,460 kWh/t' },
      { label: '总节省电费（元）', value: '1,086,000', sub: '优化调度与峰谷策略' },
      { label: '平均生产效率（吨/小时）', value: '28.5', sub: '目标 ≥ 26.0' },
      { label: '总投料量', value: '9,450', sub: '平均投料温度 1870 ℃' }
    ])
    const animatedMetricValues = ref([])

    // 左侧：对比图
    const globalCompareRef = ref(null)
    let globalCompareChart
    const furnaceNames = ['龙腾1号炉', '凤翔2号炉', '麒麟3号炉', '玄武4号炉']
    const compareMetrics = {
      产量: [2200, 2100, 2250, 2270],
      能耗: [610, 640, 598, 605], // kWh/t（越低越好）
      效率: [29.5, 27.8, 30.2, 26.9], // t/h
      良品率: [96.2, 95.1, 96.8, 94.5]
    }

    // 左侧：排名滚动
    const rankListRef = ref(null)
    const rankData = ref([
      { name: '麒麟3号炉', efficiency: 30.2 },
      { name: '龙腾1号炉', efficiency: 29.5 },
      { name: '凤翔2号炉', efficiency: 27.8 },
      { name: '玄武4号炉', efficiency: 26.9 }
    ])
    const highlightIndex = ref(0)

    // 中部：炉状态
    const furnaces = ref([
      { id: 1, name: '龙腾1号炉', status: 'online', temp: 1875, load: 82, feed: 2.6 },
      { id: 2, name: '凤翔2号炉', status: 'online', temp: 1862, load: 76, feed: 2.4 },
      { id: 3, name: '麒麟3号炉', status: 'online', temp: 1888, load: 84, feed: 2.8 },
      { id: 4, name: '玄武4号炉', status: 'offline', temp: 0, load: 0, feed: 0 }
    ])

    // 右侧：生产曲线 + 温度趋势
    const productionCurveRef = ref(null)
    const feedTempRef = ref(null)
    let productionCurveChart, feedTempChart
    const feedViewLabel = ref('按小时')
    let feedTimer

    // 底部：成本与节省
    const costSavingRef = ref(null)
    let costSavingChart
    const costViewLabel = ref('按小时')
    let costCycleTimer

    // 渲染函数们
    const renderGlobalCompare = () => {
      if (!globalCompareChart) globalCompareChart = echarts.init(globalCompareRef.value)
      const categories = Object.keys(compareMetrics)
      const palette = ['#4c9bfd','#9fe6b8','#00f2f1','#ed3f35']
      const option = {
        backgroundColor: 'transparent',
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { data: furnaceNames, top: 8, textStyle: { color: '#cfe8ff' } },
        grid: { left: 40, right: 20, top: 45, bottom: 35 },
        xAxis: {
          type: 'category',
          data: categories,
          axisLabel: { color: '#aee1ff', fontSize: 12 },
          axisLine: { lineStyle: { color: 'rgba(0,108,255,.35)' } }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#aee1ff' },
          splitLine: { show: true, lineStyle: { color: 'rgba(0,108,255,.12)', type: 'dashed' } }
        },
        animationDuration: 800,
        animationEasing: 'elasticOut',
        series: furnaceNames.map((name, idx) => ({
          name,
          type: 'bar',
          barWidth: 16,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: echarts.color.lift(palette[idx], 0.1) },
              { offset: 1, color: echarts.color.lift(palette[idx], -0.05) }
            ]),
            borderRadius: [10, 10, 0, 0],
            shadowBlur: 12,
            shadowColor: 'rgba(0,242,241,.25)',
            shadowOffsetY: 2
          },
          emphasis: { focus: 'series' },
          label: { show: true, position: 'top', color: '#cfe8ff', fontSize: 11 },
          data: categories.map(k => compareMetrics[k][idx])
        })).map((s, i) => ({ ...s, animationDelay: i * 120 }))
      }
      globalCompareChart.setOption(option)
    }

    const startRankScroll = () => {
      let idx = 0
      setInterval(() => {
        idx = (idx + 1) % rankData.value.length
        highlightIndex.value = idx
        // 轻微重排以模拟滚动
        const first = rankData.value.shift()
        rankData.value.push(first)
      }, 1800)
    }

    const renderProductionCurve = () => {
      if (!productionCurveChart) productionCurveChart = echarts.init(productionCurveRef.value)
      const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`)
      const colors = ['#00f2f1', '#4c9bfd', '#9fe6b8', '#ed3f35']
      const alphaColors = ['rgba(0,242,241,0.25)', 'rgba(76,155,253,0.25)', 'rgba(159,230,184,0.25)', 'rgba(237,63,53,0.25)']
      const base = [0, -1.2, 0.8, -2.0]
      const series = furnaceNames.map((name, idx) => ({
        name,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: { color: colors[idx] },
        lineStyle: { width: 2.5, color: colors[idx] },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: alphaColors[idx] },
            { offset: 1, color: 'rgba(0,108,255,.06)' }
          ])
        },
        emphasis: { focus: 'series' },
        data: hours.map((_, i) => Math.round(22 + Math.sin(i/3 + idx*0.3)*3 + Math.random()*2 + base[idx]))
      }))
      const option = {
        backgroundColor: 'transparent',
        tooltip: { trigger: 'axis' },
        legend: { data: furnaceNames, top: 6, textStyle: { color: '#cfe8ff' } },
        grid: { left: 40, right: 18, top: 38, bottom: 30 },
        xAxis: { type: 'category', data: hours, axisLabel: { color: '#cfe8ff' }, axisLine: { lineStyle: { color: 'rgba(0,108,255,.3)' } } },
        yAxis: { type: 'value', name: '产量(吨)', axisLabel: { color: '#cfe8ff' }, splitLine: { lineStyle: { color: 'rgba(0,108,255,.18)', type: 'dashed' } } },
        series
      }
      productionCurveChart.setOption(option)
    }

    const genFeedData = (view='day') => {
      if (view === 'day') {
        const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`)
        return {
          x: hours,
          y: hours.map((_, i) => Math.round(1865 + Math.sin(i/1.6)*24 + Math.random()*12))
        }
      } else {
        const days = Array.from({ length: 7 }, (_, i) => `周${i+1}`)
        return {
          x: days,
          y: days.map((_, i) => Math.round(1860 + Math.sin(i/1.2)*18 + Math.random()*10))
        }
      }
    }

    const renderFeedTemp = (view='day') => {
      if (!feedTempChart) feedTempChart = echarts.init(feedTempRef.value)
      const data = genFeedData(view)
      const option = {
        backgroundColor: 'transparent',
        tooltip: { trigger: 'axis' },
        grid: { left: 40, right: 18, top: 30, bottom: 30 },
        xAxis: { type: 'category', data: data.x, axisLabel: { color: '#ffcdd2' }, axisLine: { lineStyle: { color: 'rgba(237,63,53,.35)' } } },
        yAxis: { type: 'value', name: '温度(℃)', axisLabel: { color: '#ffcdd2' }, splitLine: { lineStyle: { color: 'rgba(237,63,53,.18)', type: 'dashed' } } },
        animationDurationUpdate: 800,
        series: [{
          name: '投料温度', type: 'line', smooth: true, symbol: 'circle', symbolSize: 6,
          itemStyle: { color: '#ed3f35' }, lineStyle: { width: 3, color: '#ed3f35' },
          areaStyle: { color: new echarts.graphic.LinearGradient(0,0,0,1,[{ offset:0,color:'rgba(237,63,53,.25)'},{ offset:1,color:'rgba(0,108,255,.06)'}]) },
          data: data.y
        }]
      }
      feedTempChart.setOption(option)
    }

    const genCostData = (view='day') => {
      if (view === 'day') {
        const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`)
        // 模拟峰谷电价影响的成本变化
        const peakHours = [9, 10, 11, 14, 15, 16, 19, 20, 21] // 峰时
        const valleyHours = [23, 0, 1, 2, 3, 4, 5, 6] // 谷时
        return {
          x: hours,
          cost: hours.map((_, i) => {
            let baseCost = 1200
            if (peakHours.includes(i)) {
              baseCost = 1800 + Math.random() * 200 // 峰时电费高
            } else if (valleyHours.includes(i)) {
              baseCost = 800 + Math.random() * 150 // 谷时电费低
            } else {
              baseCost = 1200 + Math.random() * 180 // 平时电费
            }
            return Math.round(baseCost)
          }),
          saved: hours.map((_, i) => {
            let baseSaved = 180
            if (peakHours.includes(i)) {
              baseSaved = 320 + Math.random() * 80 // 峰时节省更多
            } else if (valleyHours.includes(i)) {
              baseSaved = 120 + Math.random() * 60 // 谷时节省较少
            } else {
              baseSaved = 200 + Math.random() * 70 // 平时节省
            }
            return Math.round(baseSaved)
          })
        }
      } else if (view === 'week') {
        const days = ['周一','周二','周三','周四','周五','周六','周日']
        return {
          x: days,
          cost: days.map((_, i) => {
            // 工作日成本高，周末成本低
            const isWeekend = i >= 5
            const baseCost = isWeekend ? 22000 : 32000
            return Math.round(baseCost + Math.sin(i/1.6)*3800 + Math.random()*2200)
          }),
          saved: days.map((_, i) => {
            const isWeekend = i >= 5
            const baseSaved = isWeekend ? 2800 : 4500
            return Math.round(baseSaved + Math.cos(i/1.8)*800 + Math.random()*600)
          })
        }
      } else {
        const days = Array.from({ length: 30 }, (_, i) => `${i+1}日`)
        return {
          x: days,
          cost: days.map((_, i) => {
            // 月度数据，考虑生产计划影响
            const cycleFactor = Math.sin(i/7) * 0.3 + 1 // 7天生产周期
            const baseCost = 28000 * cycleFactor
            return Math.round(baseCost + Math.random()*2000)
          }),
          saved: days.map((_, i) => {
            const cycleFactor = Math.sin(i/7) * 0.2 + 1
            const baseSaved = 3200 * cycleFactor
            return Math.round(baseSaved + Math.random()*500)
          })
        }
      }
    }

    const renderCostSaving = (view='day') => {
      if (!costSavingChart) costSavingChart = echarts.init(costSavingRef.value)
      const data = genCostData(view)
      const option = {
        backgroundColor: 'transparent',
        tooltip: { 
          trigger: 'axis',
          backgroundColor: 'rgba(0,20,40,0.9)',
          borderColor: '#00f2f1',
          borderWidth: 1,
          textStyle: { color: '#fff' },
          formatter: function(params) {
            let result = '<div style="font-weight:bold;margin-bottom:5px;">' + params[0].axisValue + '</div>'
            params.forEach(param => {
              const color = param.color
              const value = param.value.toLocaleString()
              result += '<div style="margin:3px 0;"><span style="display:inline-block;width:10px;height:10px;background:' + color + ';border-radius:50%;margin-right:8px;"></span>' + param.seriesName + ': ¥' + value + '</div>'
            })
            return result
          }
        },
        legend: { 
          data: ['电费成本', '节省金额'], 
          top: 8, 
          textStyle: { color: '#cfe8ff', fontSize: 12 },
          itemGap: 20,
          icon: 'roundRect'
        },
        grid: { left: 50, right: 25, top: 45, bottom: 40 },
        xAxis: { 
          type: 'category', 
          data: data.x, 
          axisLabel: { 
            color: '#9bd7ff', 
            fontSize: 11,
            interval: 0,
            rotate: view === 'month' ? 45 : 0
          }, 
          axisLine: { 
            lineStyle: { color: 'rgba(0,108,255,.4)' } 
          },
          axisTick: {
            show: true,
            lineStyle: { color: 'rgba(0,108,255,.3)' }
          }
        },
        yAxis: { 
          type: 'value', 
          name: '金额(元)', 
          nameTextStyle: { color: '#9bd7ff', fontSize: 11 },
          axisLabel: { 
            color: '#9bd7ff',
            formatter: function(value) {
              if (value >= 10000) {
                return (value / 10000).toFixed(1) + 'w'
              }
              return value.toLocaleString()
            }
          }, 
          splitLine: { 
            lineStyle: { 
              color: 'rgba(0,108,255,.12)', 
              type: 'dashed',
              width: 1
            } 
          }
        },
        animationDuration: 1200,
        animationDurationUpdate: 900,
        animationEasing: 'cubicOut',
        series: [
          { 
            name: '电费成本', 
            type: 'bar', 
            barWidth: '45%',
            itemStyle: { 
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#4c9bfd' },
                { offset: 0.5, color: '#006cff' },
                { offset: 1, color: 'rgba(0,108,255,0.8)' }
              ]),
              borderRadius: [4, 4, 0, 0],
              shadowBlur: 8,
              shadowColor: 'rgba(76,155,253,0.3)',
              shadowOffsetY: 2
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 15,
                shadowColor: 'rgba(76,155,253,0.5)'
              }
            },
            label: {
              show: false,
              position: 'top',
              color: '#cfe8ff',
              fontSize: 10,
              formatter: function(params) {
                const value = params.value
                if (value >= 10000) {
                  return (value / 10000).toFixed(1) + 'w'
                }
                return value.toLocaleString()
              }
            },
            data: data.cost 
          },
          { 
            name: '节省金额', 
            type: 'line', 
            smooth: true, 
            symbol: 'circle', 
            symbolSize: 8,
            itemStyle: { 
              color: '#9fe6b8',
              borderColor: '#00f2f1',
              borderWidth: 2,
              shadowBlur: 6,
              shadowColor: 'rgba(159,230,184,0.4)'
            }, 
            lineStyle: { 
              width: 3, 
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#9fe6b8' },
                { offset: 0.5, color: '#00f2f1' },
                { offset: 1, color: '#4c9bfd' }
              ]),
              shadowBlur: 8,
              shadowColor: 'rgba(0,242,241,0.3)',
              shadowOffsetY: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(159,230,184,0.3)' },
                { offset: 0.6, color: 'rgba(0,242,241,0.15)' },
                { offset: 1, color: 'rgba(0,108,255,0.05)' }
              ])
            },
            emphasis: {
              focus: 'series',
              itemStyle: {
                shadowBlur: 12,
                shadowColor: 'rgba(0,242,241,0.6)'
              }
            },
            markPoint: {
              data: [
                { type: 'max', name: '最大值', itemStyle: { color: '#ed3f35' } },
                { type: 'min', name: '最小值', itemStyle: { color: '#9fe6b8' } }
              ],
              label: {
                color: '#fff',
                fontSize: 10
              }
            },
            data: data.saved 
          }
        ]
      }
      costSavingChart.setOption(option)
    }

    const animateMetrics = () => {
      animatedMetricValues.value = topMetrics.value.map(m => m.value)
      const parseNum = (s) => Number(String(s).replace(/[,]/g, ''))
      topMetrics.value.forEach((m, i) => {
        const target = parseNum(m.value)
        let cur = Math.floor(target * 0.78)
        const step = Math.max(1, Math.floor(target / 50))
        const timer = setInterval(() => {
          cur += step
          if (cur >= target) { cur = target; clearInterval(timer) }
          animatedMetricValues.value[i] = cur.toLocaleString()
        }, 40)
      })
    }

    const startCostCycle = () => {
      const views = ['day','week','month']
      let i = 0
      costCycleTimer = setInterval(() => {
        i = (i + 1) % views.length
        const v = views[i]
        costViewLabel.value = v === 'day' ? '按小时' : (v === 'week' ? '按天(周)' : '按月')
        renderCostSaving(v)
      }, 10000)
    }

    const startFeedCycle = () => {
      let v = 'day'
      feedTimer = setInterval(() => {
        v = v === 'day' ? 'week' : 'day'
        feedViewLabel.value = v === 'day' ? '按小时' : '按天(周)'
        renderFeedTemp(v)
      }, 10000)
    }

    onMounted(async () => {
      await nextTick()
      const initWhenReady = (elRef, fn) => {
        let retries = 0
        const tryInit = () => {
          if (elRef.value && elRef.value.clientWidth > 0 && elRef.value.clientHeight > 0) {
            fn()
          } else if (retries < 20) {
            retries++
            setTimeout(tryInit, 120)
          } else {
            fn() // 兜底尝试
          }
        }
        tryInit()
      }

      initWhenReady(globalCompareRef, renderGlobalCompare)
      initWhenReady(productionCurveRef, renderProductionCurve)
      initWhenReady(feedTempRef, () => renderFeedTemp('day'))
      initWhenReady(costSavingRef, () => renderCostSaving('day'))

      animateMetrics()
      startRankScroll()
      startCostCycle()
      startFeedCycle()
      window.addEventListener('resize', () => {
        globalCompareChart && globalCompareChart.resize()
        productionCurveChart && productionCurveChart.resize()
        feedTempChart && feedTempChart.resize()
        costSavingChart && costSavingChart.resize()
      })
    })

    onBeforeUnmount(() => {
      if (costCycleTimer) clearInterval(costCycleTimer)
      if (feedTimer) clearInterval(feedTimer)
    })

    return {
      topMetrics,
      animatedMetricValues,
      globalCompareRef,
      rankListRef,
      rankData,
      highlightIndex,
      furnaces,
      productionCurveRef,
      feedTempRef,
      costSavingRef,
      feedViewLabel,
      costViewLabel
    }
  }
}
</script>

<style scoped>
.production-page { display: grid; grid-template-rows: auto 1fr; gap: .6rem; height: 100%; }
.main-scroll {  display: grid; grid-auto-rows: auto; gap: .6rem; padding-right: .2rem; }
.top-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.metric-card { position: relative; padding: .4rem .6rem; border:1px solid #006cff; border-radius:8px; background: linear-gradient(135deg, rgba(0,108,255,.10), rgba(0,20,40,.15)); overflow:hidden; }
.metric-label { font-size:.6rem; background: linear-gradient(90deg, #4c9bfd, #9fe6b8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.metric-value { color:#00f2f1; font-size:1.05rem; font-weight:bold; text-shadow:0 0 10px rgba(0,242,241,.6); }
.metric-sub { color:#9fe6b8; font-size:.56rem; }
.metric-card::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(0,108,255,.12), transparent); animation: slideGlow 3s linear infinite; }
@keyframes slideGlow { 0%{left:-100%;} 100%{left:100%;} }

.content-rows { display: grid; grid-template-columns: 2.6fr 4fr 2.6fr; gap: .6rem; min-height: 0; }
.panel { border:1px solid rgba(0,108,255,.25); border-radius:8px; background: rgba(0,0,0,.35); padding: .35rem; display:flex; flex-direction:column; gap:.3rem; backdrop-filter: blur(2px); box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.panel-title { text-align:center; font-size:.76rem; background: linear-gradient(90deg, #aee1ff, #9fe6b8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:.02rem; }
.chart-box { height: 9.2rem; background: rgba(0,0,0,.25); border-radius:6px; box-shadow: inset 0 0 30px rgba(0,108,255,.08); }
.chart-box.small { height: 8rem; }
.chart-box.large { height: 10rem; }

.left-col { display:flex; flex-direction:column; gap:.6rem; }
.cost-panel { flex: 1; }
.cost-chart { height: 10rem !important; }
.rank-list { height: 8rem; overflow:hidden; display:flex; flex-direction:column; gap:.3rem; }
.rank-list li { display:flex; justify-content:space-between; padding:.35rem .45rem; border:1px solid rgba(0,108,255,.25); border-radius:6px; color:#cfe8ff; background:linear-gradient(135deg, rgba(0,20,40,.35), rgba(0,5,15,.45)); }
.rank-list li.highlight { box-shadow:0 0 12px rgba(0,242,241,.45); border-color:#00f2f1; }
.rank-name { background: linear-gradient(90deg, #4c9bfd, #9fe6b8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.rank-value { color:#00f2f1; font-weight:bold; }

.center-col { display:flex; flex-direction:column; gap:.6rem; }
.furnace-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:.5rem; }
.furnace-card { position:relative; border:1px solid rgba(0,108,255,.25); border-radius:8px; background:linear-gradient(135deg, rgba(0,20,40,.35), rgba(0,5,15,.45)); padding:.45rem; overflow:hidden; }
.furnace-card::after { content:''; position:absolute; inset:-1px; background: radial-gradient(60% 40% at 25% 20%, rgba(0,242,241,.10), transparent 60%), radial-gradient(40% 60% at 80% 75%, rgba(0,108,255,.10), transparent 60%); filter: blur(4px); animation: auroraShift 8s ease-in-out infinite alternate; pointer-events:none; }
@keyframes auroraShift { 0%{ transform: translate3d(0,0,0); } 100%{ transform: translate3d(2%, -2%, 0); } }
.furnace-head { display:flex; justify-content:space-between; align-items:center; }
.furnace-name { font-size:.7rem; color:#cfe8ff; }
.furnace-status { font-size:.6rem; padding:.08rem .4rem; border-radius:12px; }
.furnace-status.online { background:#006cff; color:#fff; }
.furnace-status.offline { background:#999; color:#fff; }
.furnace-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap:.3rem; color:#cfe8ff; margin-top:.3rem; }
.furnace-stats .stat b { color:#00f2f1; }
.flow-steps { text-align:center; color:#cfe8ff; font-size:.66rem; margin-bottom:.3rem; }
.flow-2d { height: 12rem; border:1px solid rgba(0,108,255,.25); border-radius:8px; background: rgba(0, 0, 0, 0.35); }

.right-col { display:flex; flex-direction:column; gap:.6rem; }

/* 底部电费成本分析区域 */
.bottom-section { 
  margin-top: -3rem; 
  position: relative;
  z-index: 1;
  height: 160px !important;
}
.cost-panel-full { 
  position: relative;
  border:1px solid rgba(0,108,255,.25); 
  border-radius:8px; 
  background: rgba(0,0,0,.35); 
  padding: .35rem; 
  display:flex; 
  flex-direction:column; 
  gap:.3rem; 
  backdrop-filter: blur(2px); 
  box-shadow: 0 6px 14px rgba(0,0,0,.25); 
  min-height: 0;
}
.cost-panel-full::before,
.cost-panel-full::after { display: none; content: none; }
.cost-chart-full { 
  height: 12rem; 
  background: rgba(0,0,0,.25); 
  border-radius:6px; 
  box-shadow: inset 0 0 30px rgba(0,108,255,.08); 
}

/* 主滚动容器 */
.main-scroll {
  height: calc(100vh - 120px);
  padding-right: 8px;
}

.main-scroll::-webkit-scrollbar {
  width: 6px;
}

.main-scroll::-webkit-scrollbar-track {
  background: rgba(0,108,255,.1);
  border-radius: 3px;
}

.main-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,108,255,.4);
  border-radius: 3px;
}

.main-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0,108,255,.6);
}

.bottom-row { margin-top:.2rem; }

@media screen and (max-width: 1400px) {
  .chart-box { height: 8.5rem; }
  .flow-2d { height: 10rem; }
}
</style>